<template>
  <div id="">
    {{ Test.name }}--{{ Test.count }}
    <el-button @click="add">ADD</el-button>
    <el-button @click="change">修改name</el-button>
    <el-button @click="onAction">调用action</el-button>
    <el-button @click="reset">重置store</el-button>
    {{ Test.newName }}
  </div>
</template>

 <script setup lang="ts">
import {} from "vue";
//  引入store文件
import { storeToRefs } from "pinia";
import { useTest } from "../store/index";
const Test = useTest();
// 把pinia仓库里的值解构出来是不具有响应式的
// 通过storeToRefs包裹后值就具有响应式，实际上原理就是用ref包裹
const { name, count } = storeToRefs(Test);

const add = () => {
  // pinia可以直接修改仓库的值
  Test.count++;
};

const change = () => {
  // 通过$patch修改
  // Test.$patch({name:'阿夸啊啊啊啊'})

  // $patch可以接收一个函数对state做进一步处理
  Test.$patch((state) => {
    state.name = "阿夸112";
  });
};

const onAction = () => {
  // 直接通过对象调用action
  Test.setName("你好呀");
  // Test.user();
};

const reset = () => {
  // 将state恢复到初始的状态
  Test.$reset();
};

// 每次state的值发生改变时都会触发它的回调
// 第一个参数保存了一些可能有用的信息，第二个参数是改变后的state
Test.$subscribe((args, state) => {
  console.log("发生了变化");
  console.log(args);
  console.log(state);
},{
  // 第二个参数是一个对象，可以设置一些配置
});
// 调用action时会触发它的回调
// 参数里保存了被调用的action的信息
Test.$onAction((args) => {
  console.log('action被调用了');
  console.log(args);
});
</script>

<style lang="less" scoped>
</style>